<template>
  <view class="btn-container">
    <view class="btn-wrapper">
      <view class="btn-left" @click="handleSaveDraft" v-if="type==='Detail'">
        <view class="draft-btn">
          <tm-icon name="tmicon-delete" :font-size="28"></tm-icon>
          <text style="font-size: 20rpx;">删除子表</text>
        </view>
      </view>
      <view class="btn-left" @click="handleSaveDraft" v-if="isdraft && type==='Primary'">
        <view class="draft-btn">
          <image
            src="../../../static/draft.svg"
            class="draft-icon"
            mode="aspectFit"
          />
          <text style="font-size: 20rpx;">存草稿</text>
        </view>
      </view>
      <view class="btn-right">
        <tm-button
          :shadow="0"
          block
          :disabled="!canSubmit"
          disabledColor="#B5C7FF"
          fontColor="#fff"
          :margin="[0]"
          :padding="[0,0]"
          :height="100"
          @click="handleSubmit"
        >
          <text style="font-size: 28rpx;">{{type==='Primary'?'提交':'保存'}}</text>
        </tm-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { ref } from 'vue'
defineProps({
  // 状态类型：Primary-主表按钮，Detail-子表按钮
  type: {
    type: String,
    default: 'Primary'
  },
  // 是否可以提交的状态
  canSubmit: {
    type: Boolean,
    default: false
  },
  //是否有暂存的情况
  isdraft: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['save','delete'])
// 存草稿按钮点击事件
const handleSaveDraft = () => {
  emit('delete')
}

// 提交按钮点击事件
const handleSubmit = () => {
  console.log(2);
  emit('save')
}
</script>

<style lang="scss" scoped>
.btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  height: 140rpx;
  z-index: 100;
}

.btn-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20rpx;
}

.btn-left {
  flex: 1;
}

.btn-right {
  flex: 5;
}

.draft-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 16rpx;
  height: 100%;
}
.draft-icon {
  width: 54rpx;
  height: 54rpx;
  transform: rotate(180deg);
}
</style>
  